<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
    <div id="app">
        <cpn1></cpn1>
        <cpn2></cpn2>
      </div>
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>
<!-- script标签 -->
<script type="text/x-template" id="cpn1">
    <div>
        <h2>组件模板的分离写法</h2>
        <p>script标签注意类型是text/x-template</p>
    </div>
</script>
<!-- template标签 -->
<template id="cpn2">
    <div>
        <h2>组件模板的分离写法</h2>
        <p>template标签</p>
    </div>
</template>
<script>
   const app = new Vue({
      el: "#app",
      components: { //局部组件创建
        cpn1:{
          template:'#cpn1'
        },
        cpn2: {
          template: '#cpn2'
        }
      }
    })
  </script>
  </body>
  </html>